
// 选择部门
Vue.component('dept', {
    name: "dept",
    template: `<div>
            <div v-for="item in datas" class=" bg-fff br-t min-hg-55">
                <div>
                    <div class="flex-between">
                        <div class="flex" style="flex-grow: 1;min-height:55px;padding-left:10px;" >
                        <label>
                            <input v-on:change="changeSky(item)"  :value="item" type="checkbox" /> <i>✓</i>
                            <!-- <input v-on:change="changeSky(item)" v-bind:checked="item.checked" :value="item" type="checkbox" /> <i>✓</i> -->
                        </label>
                           <div class="flex" style="flex-grow: 1;"  v-on:click="showMore(item)">
                                <img class="thumb-img" :src="imgs" />
                                <div >
                                    <div>{{item.name}}</div>
                                    <div>{{item.sub_dept.length}}人</div>
                                </div>
                           </div>
                        </div>
                        <div  style="padding-right:15px;color:#666;" class="iconfont iconmore"></div>
                    </div>
                </div>
                <div style="padding-left:20px">
                    <dept v-if="item.show" :datas="item.sub_dept" :arrs="arrs" :imgs="imgs"></dept>
                <div>
            </div>
    </div>`,
    props: ["datas", "arrs", "imgs"],
    methods: {
        showMore: function (item) {
            setTimeout(res => {
                item.show = !item.show;
                this.$forceUpdate();
            })
        },
        changeSky: function (item) {
            this.$forceUpdate();
            // item.checked = !item.checked


            if (this.arrs.length > 0) {
                let status = this.arrs.indexOf(item);

                if (status == -1) {
                    this.arrs.push(item)
                } else {
                    this.arrs.splice(status, 1)
                }
            } else {
                this.arrs.push(item)
            }

            // setTimeout(res => {
            //     item.sub_dept.forEach(d => {
            //         d.checked = item.checked;
            //     });
            //     this.$forceUpdate();
            //     console.log(item)

            // }, 300)
            this.$forceUpdate();
        },
    }
});
// 组织架构选择成员
Vue.component('dept-user', {
    name: "dept-user",
    template: `<div>
            <div v-for="item in datas" class=" bg-fff br-t min-hg-55">
                <div>
                    <div class="flex-between">
                        <div class="flex" style="flex-grow: 1;min-height:55px;"  v-on:click="showMore(item)">
                            <img class="thumb-img" :src="imgs" />
                            <div style="flex-grow: 1;">
                                <div>{{item.name}}</div>
                                <div>{{item.sub_user.length}}人</div>
                            </div>
                        </div>
                        <div v-if="item.sub_user.length>0||item.sub_dept.length>0" style="padding-right:15px;color:#666;" class="iconfont iconmore"></div>
                    </div>
                    <div style="margin-left: 30px;"  v-if="item.show" >
                        <label  class="flex lists br-t" :val="user.id" v-for="user in item.sub_user">
                            <input v-on:change="changeSky(user)" :value="user" type="checkbox" /> <i>✓</i>
                            <div class="flex">
                                <img class="thumb-img" :src="user.avatar" />
                                <span>{{user.name}}</span>
                            </div>
                        </label>
                    </div>
                </div>
                <div style="padding-left:20px">
                    <dept-user v-if="item.show" :datas="item.sub_dept" :arrs="arrs"  :imgs="imgs"></dept-user>
                <div>
            </div>
    </div>`,
    props: ["datas", "arrs", "imgs"],
    methods: {
        showMore: function (item) {
            setTimeout(res => {
                item.show = !item.show;
                this.$forceUpdate();
            })
        },
        changeSky: function (item) {
            let status = this.arrs.indexOf(item);
            if (this.arrs.length > 0) {
                if (status == -1) {
                    this.arrs.push(item)
                } else {
                    this.arrs.splice(status, 1)
                }
            } else {
                this.arrs.push(item)
            }
            this.$forceUpdate();
        },
    }
});
// 选择成员
Vue.component('select-user', {
    name: "select-user",
    template: `
    <div>
        <label  class="flex lists br-t" :val="user.id" v-for="user in datas">
            <input v-on:change="selectUser(user)"  type="checkbox" /> <i>✓</i>
            <div class="flex">
                <img class="thumb-img" :src="user.avatar" />
                <span>{{user.name}}</span>
            </div>
        </label>
    </div>
    `,
    props: ["datas", "arrs"],
    methods: {
        selectUser: function (item) {
            console.log(item)
            let status = this.arrs.indexOf(item);
            if (this.arrs.length > 0) {
                if (status == -1) {
                    this.arrs.push(item)
                } else {
                    this.arrs.splice(status, 1)
                }
            } else {
                this.arrs.push(item)
            }
            // console.log(this.arrs)
            this.$forceUpdate();
        },
    }
});
// 三合一
Vue.component('all-datas', {
    name: "all-datas",
    template: `
    <div>
    <!--  <div class="search-input flex-center">
            <div class="flex-between">
               <label>
                    <input  placeholder="请输入内容"></input><i>✓</i>
               </label>
            </div> 
        </div>-->
        <div class="tabs flex-around sky-head">
            <div class="h-bar" v-for="item in tabs" :class="{'selected':item.id == currentTab}" @click="changeType(item)">
                {{item.name}}
            </div>
        </div>
        <div id="t-templates">
            
            <div v-if="currentTab==1" class="flex-between fs-15 pd-10 bg-fff br-t" @click="changeLookType">
                <div>{{lookType?'按组织架构查看':'按成员姓名查看'}}</div>
                <div class="iconfont iconmore fs-15 color-666"></div>
            </div>
            <div v-show="currentTab==1">
                <div v-show="lookType">
                    <select-user :datas="datas.user_all"  v-bind:arrs="arrs.users"></select-user>
                </div> 
                <div v-show="!lookType">
                    <dept-user :arrs="arrs.users"  :datas="datas.department_user_all"  :imgs="arrs.imgs"></dept-user>
                </div>
            </div>
            <div v-show="currentTab==2">
                 <dept :arrs="arrs.depts"  :imgs="arrs.imgs" :datas="datas.department_all" ></dept>
            </div>
        </div>
        <div @click="submit()" class="flex-between footers">
            <div class="flex">
                <span class="color-999">已选择:</span>
                <span class="pd-lr-20">{{arrs.depts.length!=1?arrs.depts.length+'部门':arrs.depts[0]['name']}}</span>
                <span>{{arrs.users.length!=1?arrs.users.length+'成员':arrs.users[0]['name']}}</span>
            </div>
            <div class="btn">确定</div>
        </div>
    </div>
    `,
    props: ["datas", "submit", "arrs", tabs = [{ id: 1, name: "成员" }, { id: 2, name: "部门" }], lookType = true,
        currentTab = 1,],
    mounted() {
        this.lookType = true;
    },
    methods: {
        changeType: function (item) {
            this.currentTab = item.id;
            this.$forceUpdate();
        },
        changeLookType: function () {
            this.lookType = !this.lookType;
            this.$forceUpdate();
        },
    }
});
// 筛选
Vue.component('search-type', {
    name: "search-type",
    template: `<div>
    <div class="pd-t-35 mr-l-25" v-for="lists in datas">
        <div class="fs-18 color-333 fw-700 mr-b-20">{{lists.name}}</div>
        <div class="flex-wrap ">
            <div @click="cb(item)" v-for="item in lists.list" class="min-btn them3-color w-btn fs-14 mr-r-15 mr-b-15 flex-center">
                {{item.name}}</div>
        </div>
    </div>
   </div>
    `,
    props: ["datas", "cb"],
});

// 筛选
Vue.component('tips', {
    name: "tips",
    template: `<div class="flex-center">
        <div>
            <div class="flex-center"><img :src="img" :style="{'width':width}" /></div>
            <div class="fs-18 color-999 flex-center mr-t-20">{{mes}}</div>
        </div>
    </div>
    `,
    props: ["mes", "img","width"],
});

// 三级联动
Vue.component('section-list', {
    name: "section-list",
    template: `<div style="position:absolute;bottom:0;width:100%;">
        <div style="background:#fff;">
          <div class="br-b hg-50 pd-lr-15 flex-between">
            <div class="flex">
                <div class="pd-r-20" @click="changeType(1)">{{province.province||'请选择'}}</div>
                <div class="pd-r-20" @click="changeType(2)">{{city.city||'请选择'}}</div>
                <div class="pd-r-20" @click="changeType(3)">{{countie.area||'请选择'}}</div>
            </div>
            <div>确定</div>
          </div>
          <div>
            <ul style="height:300px;overflow:auto;" v-if="type==1">
                <li class="pd-15" @click="selectProvince(p)" v-for="p in datas">{{p.province}}</li>
            </ul>
            <ul style="height:300px;overflow:auto;" v-if="type==2">
                <li class="pd-15" @click="selectCitys(c)" v-for="c in citys">{{c.city}}</li>
            </ul>
            <ul style="height:300px;overflow:auto;" v-if="type==3">
                <li class="pd-15" @click="selectCounties(c)" v-for="c in counties">{{c.area}}</li>
            </ul>
          </div>
        </div>
    </div>
    `,
    props: ["datas", "arr","citys",'counties',type=1,province={},city={},countie={}],
    mounted() {
        this.type = '1';
        console.log(this.type)
    },
    methods: {
        selectProvince: function (p) {
            this.citys = p.cities;
            this.province = p;
            this.type = 2;
            this.$forceUpdate();
        },
        selectCitys: function (c) {
           
            this.counties = c.counties;
            this.city = c;
            this.type = 3;
            this.$forceUpdate();
        },
        selectCounties: function (c) {
            this.countie = c;
            this.$forceUpdate();
        },
        changeType:function(i){
            this.type = i;
            this.$forceUpdate();
        },
    }
});